<template>
  <div>
    <!-- 导航栏 -->

    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
      :fixed="true"
      :placeholder="true"
      :z-index="999"
    />

    <!-- 索引栏 -->
    <div>
      <van-index-bar
        highlight-color="green"
        ref="a"
        :sticky="true"
        :sticky-offset-top="45"
      >
        <div v-if="falg">
          <div v-for="(item, index) in renderList" :key="index">
            <van-index-anchor
              :index="index !== '#' ? index : '当前城市'"
              class="barTitle"
            />
            <van-cell
              :title="el.label"
              v-for="el in item"
              :key="el.value"
              class="barText"
              :border="true"
              size="large"
              :to="{ name: 'searchhome', query: { el } }"
              @click="fn(el)"
            />
          </div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import { areaList, cityHot } from '@/api/user'
export default {
  name: 'cityList',
  methods: {
    fn (el) {
      localStorage.setItem('label', JSON.stringify(el))
    }
  },
  data () {
    return {
      falg: false,
      renderList: {},
      label: JSON.parse(localStorage.getItem('label')) || {
        label: '北京',
        pinyin: 'beijing',
        short: 'bj',
        value: 'AREA|88cff55c-aaa4-e2e0'
      }
    }
  },
  async created () {
    const a = await areaList(1)
    const hot = await cityHot()
    const b = a.body.sort((a, b) => {
      if (a.short > b.short) return 1
      else return -1
    })
    this.$refs.a.indexList.forEach(item => {
      this.renderList[item] = b.filter(el => el.short[0].toUpperCase() === item)
    })
    this.renderList['#'] = [this.label]
    this.renderList['热门城市'] = hot.body
    this.falg = true
  },
  mounted () {
    this.$refs.a.indexList.unshift(...['#', '热门城市'])
  }
}
</script>

<style scoped lang="less"></style>
